import React, { useState } from 'react';
import { Modal, Button, message, Input, Upload, Row, Col, Space, Image, Avatar } from 'antd';
// import { SmileTwoTone } from '@ant-design/icons';
import style from './index.module.css';
// import {
//     EnvironmentTwoTone,
//     PictureTwoTone,
// } from "@ant-design/icons";
import { throttle } from './../../../utils/throttle';
import { post } from './../../../utils/post';
const { TextArea } = Input;
function InputMessage(props) {
    const [loading, changeLoading] = useState(false);
    const [others,changeOthers] = useState('')
    const userMsg = JSON.parse(localStorage.getItem('usersMessage'))
    const {msgId}=props
    const handleOk = async () => {
        changeLoading(true)
        if (!inputValue) {
            message.warning('请输入一点东西吧~')
            changeLoading(false);
            props.changeShow(false);
            return
        }
        let arr =[];
        post('/api/searchComment',{
            _id:msgId
        }).then(res => {
            const {data: {data: {userInfo}}} = res
            const obj = {//新评论数据
                _id: userMsg._id,
                nickename: userMsg.nickname,
                avater: userMsg.avater,
                content: inputValue
            }
            if (userInfo !== undefined) {
                arr=[...userInfo,obj]
            }
        }).then(res=>{
            post('/api/addComment', {
                _id:msgId,
                others:arr
             }).then(res => {
                changeOthers(arr)
                changeLoading(false);
                props.changeShow(false);
                imgArr.clear()
            }).catch(res => {
                changeLoading(false);
                props.changeShow(false);
                console.log(res);
             })}
        )
    };
    let imgArr = new Set()
    let inputValue
    const handleCancel = () => {
        setTimeout(() => {
            props.changeShow(false);
        }, 0);

    };
    const onChange = e => {
        inputValue = e.target.value
    };

    const showInfo = () => {
        return (
            <>
                <Avatar src={userMsg.avater}  />
                <p className={`${style.title}`}>What is happening?</p>
            </>
        )
    }

    const content = () => {
        return (
            <>
                <TextArea
                    className={`${style.input}`}
                    placeholder="说点什么...."
                    onChange={throttle(onChange, '500')}
                />
                {/* <Popover placement="bottom" title={'who can reply?'} content={changeReplyContent} trigger="click">
                    <Button type="primary" shape="round" icon={IconTable[reply]} size="small">
                        {message[reply]}
                    </Button>
                </Popover> */}

                <Row className={`${style.bottom}`}>
                    {/* <Col span={8} >
                        <Space>
                            <Upload {...someImg}>
                                <PictureTwoTone />
                            </Upload>
                            <EnvironmentTwoTone />
                            <SmileTwoTone />
                        </Space>
                    </Col> */}
                    <Col span={8} offset={8}
                        style={{position: "absolute", right: '24px'}}
                    >
                        <Button type="primary" shape="round" onClick={handleOk} loading={loading} style={{ float: 'right' }}>
                            发送
                        </Button>
                    </Col>
                </Row>
            </>
        )
    }
    return (
        <>
            <Modal
                style={{ position: 'absolute', left: '35%', height: '280px' }}
                bodyStyle={{ borderRadius: '20px', height: '280px' }}
                width={600}
                visible={props.show}
                onCancel={handleCancel}
                footer={null}
                mask={false}
                position="relative"
            >
                {
                    showInfo()
                }{
                    content()
                }
            </Modal>
        </>

    );
}
export default InputMessage;